<template>
    <div>
        <h4>（1）主色</h4>
        <p>Element Plus 默认的主题色是明亮、友好的蓝色。</p>
        <MainColor />
        <h4>（2）辅助色</h4>
        <p>除了主颜色外，您需要在不同的场景中使用不同的场景颜色 (例如，危险的颜色表示危险的操作)</p>
        <SecondaryColors />
        <h4>（3）中性色</h4>
        <p>中性色用于文本、背景和边框颜色。 通过运用不同的中性色，来表现层次结构。</p>
        <NeutralColor />
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import MainColor from "./main-color.vue";
import SecondaryColors from "./secondary-colors.vue";
import NeutralColor from "./neutral-color.vue";
</script>

<style lang="less">
.bg-transparent {
    color: var(--el-text-color-primary);
    background-image: linear-gradient(45deg, #f4f4f5 25%, #f000 25%), linear-gradient(135deg, #f4f4f5 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #f4f4f5 75%), linear-gradient(135deg, #0000 75%, #f4f4f5 75%);
    background-size: 20px 20px;
    background-position:
        0px 0px,
        10px 0px,
        10px -10px,
        0px 10px;
}
.demo-color-box {
    position: relative;
    border-radius: 4px;
    padding: 20px;
    margin: 8px 0;
    height: 112px;
    box-sizing: border-box;
    color: var(--el-color-white);
    font-size: 14px;
    .bg-color-sub {
        width: 100%;
        height: 40px;
        left: 0;
        bottom: 0;
        position: absolute;
        .bg-blue-sub-item {
            height: 100%;
            //display: inline-block;
            &:first-child {
                border-radius: 0 0 0 var(--el-border-radius-base);
            }
            display: inline-flex !important;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .bg-secondary-sub-item {
            height: 100%;
            //display: inline-block;
            &:first-child {
                border-radius: 0 0 0 var(--el-border-radius-base);
            }
            display: inline-flex !important;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }
    .value {
        margin-top: 2px;
    }
}
.demo-color-box-lite {
    color: var(--el-text-color-primary);
}
.demo-color-box .bg-color-sub .bg-blue-sub-item {
    height: 100%;
    display: inline-block;
}
</style>
